<template>
	<div class="index">
        <search></search>   <!-- 搜索框 -->
        <indexslider></indexslider> <!-- 轮播图 -->
        <img src="../../static/image/index/top_xianhuozhuanchang.gif" style="width: 100%">

        <div id="top_loop">
            <div id="top_loop_left"><img src="../../static/image/index/price.png"></div>
            <div id="top_loop_right">
                <yd-slider autoplay="3000" :show-pagination="false" >
                    <yd-slider-item v-for="(items, key) in priceList" :key="key">
                        <div class="loop" >
                            <p><span class="loop_span">会员:{{items.price}}</span>元/千克</p>
                            <p>{{items.name}}</p>
                        </div>
                        <div class="loop" >
                            <p><span class="loop_span">会员:{{items.price}}</span>元/千克</p>
                            <p>{{items.name}}</p>
                        </div>
                    </yd-slider-item>
                </yd-slider>
            </div>
        </div>

        <indexgrids></indexgrids>

        <div class="content">
            <img src="../../static/image/index/content_jinrilvjia.gif" style="width: 100%">
            <img src="../../static/image/index/video.jpg" style="width: 100%;height: 3rem">
            <img @click="join" src="../../static/image/index/content_hezuojiameng.gif" style="width: 100%;">
            <img src="../../static/image/index/content_remenxianhuo.gif" style="width: 100%;">
            <img @click="huiyuan" src="../../static/image/index/huiyuan.gif" style="width: 100%">
        </div>
        <div class="cate_type">
            <yd-list theme="1">
                <yd-list-item v-for="(item, key) in Lists" :key="key">
                    <img slot="img" :src="item.image_url"  @click="showIntro(item.id)">
                </yd-list-item>
            </yd-list>
        </div>

        <yd-flexbox direction="vertical" id="bottom">
            <yd-flexbox-item><a href="tel:13999119827">如有疑问，请一键人工咨询</a> </yd-flexbox-item>
        </yd-flexbox>
	</div>
</template>
<style>
    .index{
        padding-bottom: 0.2rem;
    }
    #top_loop_left{
        float: left;
        position: absolute;
    }
    #top_loop_right{
        float: right;
        margin-top: 0.12rem;
        width: 100%;
        text-align: center;
    }
    .yd-slider-item{
        min-height: 1.1rem;
    }
    .yd-slider-pagination{
        z-index: -2;
    }
    .loop{
        display: inline-block;
        border: 0.01rem solid #e5e5e5;
        border-radius: 0.1rem;
        padding: 0.1rem;
        position: relative;
        left: 0.5rem;
    }
    .loop_span{
        color: #ff4949;
        font-size: 0.1rem;
    }
    #bottom{
        border:0.02rem solid red;
        border-radius: 0.1rem;
        margin: 0.2rem 0.2rem 0 0.2rem;
        padding: 0.15rem;
    }
    .cate_type .yd-list-theme1 .yd-list-item .yd-list-mes{ display: none}
</style>
<script>
import search from '../components/Search.vue'
import indexslider from '../components/IndexSlider.vue'
import rollnotice from '../components/RollNotice.vue'
import indexcoupon from '../components/IndexCoupon.vue'
import indexgrids from '../components/IndexGrids.vue'
import indexlisthot from '../components/IndexListHot.vue'
import indexlistrec from '../components/IndexListRec.vue'
import groupbuying from '../components/GroupBuying'
import seckill from '../components/Seckill'
import indexsliderad from '../components/IndexSliderAd.vue'
import IndexBannarOne from '../components/IndexBannarOne.vue'
import IndexBannarTwo from '../components/IndexBannarTwo.vue'

export default {
    data () {
        return {
            couponList: [],
            priceList: [],
            Lists:[]
        }
    },
    components: {
            indexsliderad, IndexBannarOne, IndexBannarTwo, search, indexslider, rollnotice, indexcoupon, indexgrids, indexlisthot, indexlistrec, groupbuying, seckill
    },
    // 实例创建并挂载后调用此方法
    mounted () {
        this.getCouponList()
        this.getPriceList()
        this.getTopCat()
    },
    methods: {
        // 获取公告信息
        getPriceList () {
            this.$api.priceLists().then(res => {
                if (res.status) {
                    this.priceList = res.data
                   /* for (var i = 0;i<=this.priceList;i++) {
                        var lists = this.priceLists
                        if(i/2==0){
                            lists.add(this.priceLists(i))
                            alert(lists)
                        }
                    }*/
                }
            })
        },
        // 获取商户优惠券信息
        getCouponList () {
            this.$api.couponList({}, res => {
                if (res.status) {
                    this.couponList = res.data
                }
            })
        },
        shouyi () {
            this.$router.push({path: '/shouyi'})
        },
        huiyuan () {
            this.$router.push({path: '/Vip'})
        },
        join () {
            this.$router.push({path: '/Join'})
        },
        showIntro (id) {
            this.$router.push({path: '/Introduction', query: {introduction_id: id}})
        },
        getTopCat () {
            this.$api.gettopcatList({}, res => {
                if (res.status) {
                    this.Lists = res.data
                }
            })
        }
    }
}
</script>

<style>
</style>
